import * as echarts from 'echarts'
import { useEffect, useRef, useState } from 'react'
export default function RelationalGraph({ data }) {
    const graphRef = useRef(null)
    const [myChart, setMyChart] = useState()
    let timer = useRef(null)
    const resizeObserver = new ResizeObserver(entries => {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            myChart && myChart.resize();
        }, 100)
    });
    useEffect(() => {
        setMyChart(echarts.init(graphRef.current))
    }, [])
    const renderChart = () => {
        const option = {
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 50,
                    symbol: 'circle',
                    roam: true,
                    zoom: 1,
                    focusNodeAdjacency: false,
                    draggable: true,
                    animation: true,
                    layoutAnimation: true,
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                fontSize: 14,
                                lineHeight: 18,
                                color: '#fff'
                            }
                        }
                    },
                    force: {
                        repulsion: 10000,
                        gravity: 0.05,
                        layoutAnimation: false
                    },
                    edgeSymbol: ['arrow', 'circle'],
                    edgeSymbolSize: [10, 1],
                    edgeLabel: {
                        normal: {
                            show: true,
                            color: '#1c1f23',
                            position: 'middle',
                            textStyle: {
                                fontSize: 12
                            },
                            formatter: "{c}"
                        }
                    },
                    lineStyle: {
                        normal: {
                            color: 'target',
                            opacity: 1,
                            width: 2,
                            curveness: 0
                        }
                    },
                    categories: [{
                        name: '',
                        itemStyle: {
                            normal: {
                                borderType: 'dashed',
                                borderColor: '#165DFF',
                                borderWidth: 2,
                                color: '#E8F3FF'
                            }
                        },
                        label: {
                            backgroundColor: '#165DFF',
                            width: 100,
                            height: 100,
                            borderRadius: 50,
                            borderWidth: 9,
                            borderColor: '#E8F3FF',
                        }
                    }, {
                        name: '#165DFF',
                        itemStyle: {
                            normal: {
                                color: "#165DFF",

                            }
                        }
                    }, {
                        name: '#05A4B6',
                        itemStyle: {
                            normal: {
                                color: "#05A4B6",
                            }
                        }
                    }, {
                        name: '#05A4B6',
                        itemStyle: {
                            normal: {
                                color: "#05A4B6",
                            }
                        }
                    }, {
                        name: '#05A4B6',
                        itemStyle: {
                            normal: {
                                color: "#05A4B6",
                            }
                        }
                    }],
                    data: data.data.map((item, index) => ({
                        name: item,
                        symbol: 'circle',
                        category: index,
                        symbolSize: index === 0 ? [120, 120] : [100, 100]
                    })),
                    links: data.link.map((item, index) => ({
                        source: 0,
                        target: index + 1,
                        value: item
                    }))
                }
            ]
        };
        option && myChart.setOption(option);
    }
    useEffect(() => {
        // 保证dom可用 才进行图表的渲染
        myChart && renderChart()
        resizeObserver.observe(graphRef.current);
        return () => resizeObserver.disconnect();
    }, [myChart, data])
    return (
        <div ref={graphRef} style={{ width: '100%', height: '100%' }}></div>
    )
}
